<template>
  <div>
    <div class="i-layout-page-header header-title">
      <span class="ivu-page-header-title" v-if="!isShowList"
        >一号通账户<span class="title-tips">快速开通短信接口、物流接口、商品采集接口、电子面单接口等</span></span
      >
      <div v-if="isShowList" class="acea-row row-between-wrapper picTxt">
        <div slot="content">
          <Avatar class="dashboard-workplace-header-avatar" :src="imgUrl" />
          <div class="dashboard-workplace-header-tip">
            <p class="dashboard-workplace-header-tip-title">{{ smsAccount }}，祝您每一天开心！</p>
            <p class="dashboard-workplace-header-tip-desc">
              <a href="#" @click="onChangePassswordIndex">修改密码</a>
              <Divider type="vertical" />
              <!-- <a href="#" @click="onChangePhone">修改手机号</a>
                <Divider type="vertical" /> -->
              <a href="#" @click="signOut">退出登录</a>
            </p>
          </div>
        </div>
        <div class="dashboard">
          <div class="dashboard-workplace-header-extra">
            <div class="acea-row">
              <div class="header-extra">
                <p class="mb5"><span>短信条数</span></p>
                <div v-if="sms.open === 0">
                  <p>暂未开通</p>
                  <Button size="small" type="primary" class="mt3 samll_font" @click="onOpen('sms')">开通服务</Button>
                </div>
                <div v-else>
                  <p>{{ sms.num || 0 }}</p>
                  <Button
                    size="small"
                    type="primary"
                    class="mt3 samll_font"
                    style="textalign: center"
                    @click="mealPay('sms')"
                    >套餐购买</Button
                  >
                </div>
              </div>
              <div class="header-extra">
                <p class="mb5"><span>采集次数</span></p>
                <div v-if="copy.open === 0">
                  <p>暂未开通</p>
                  <Button size="small" type="primary" class="mt3 samll_font" @click="onOpen('copy')">开通服务</Button>
                </div>
                <div v-else>
                  <p>{{ copy.num || 0 }}</p>
                  <Button size="small" type="primary" class="mt3 samll_font" @click="mealPay('copy')">套餐购买</Button>
                </div>
              </div>
              <div class="header-extra">
                <p class="mb5"><span>物流查询次数</span></p>
                <div v-if="query.open === 0">
                  <p>暂未开通</p>
                  <Button size="small" type="primary" class="mt3 samll_font" @click="onOpen('query')">开通服务</Button>
                </div>
                <div v-else>
                  <p>{{ query.num || 0 }}</p>
                  <Button size="small" type="primary" class="mt3 samll_font" @click="mealPay('expr_query')"
                    >套餐购买</Button
                  >
                </div>
              </div>
              <div class="header-extra" style="border: none">
                <p class="mb5"><span>面单打印次数</span></p>
                <div v-if="dump.open === 0">
                  <p>暂未开通</p>
                  <Button size="small" type="primary" class="mt3 samll_font" @click="onOpen('dump')">开通服务</Button>
                </div>
                <div v-else>
                  <p>{{ dump.num || 0 }}</p>
                  <Button size="small" type="primary" class="mt3 samll_font" @click="mealPay('expr_dump')"
                    >套餐购买</Button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt" style="min-height: 600px">
      <login-from
        @on-change="onChangePasssword"
        v-if="isShowLogn"
        @on-changes="onChangeReg"
        @on-Login="onLogin"
      ></login-from>
      <forget-password v-if="isShow" @goback="goback" @on-Login="onLogin" :isIndex="isIndex"></forget-password>
      <register-from v-if="isShowReg" @on-change="logoup"></register-from>
      <table-list
        ref="tableLists"
        v-if="isShowList"
        :sms="sms"
        :copy="copy"
        :dump="dump"
        :query="query"
        :accountInfo="accountInfo"
        @openService="openService"
      ></table-list>
      <forget-phone v-if="isForgetPhone" @gobackPhone="gobackPhone" @on-Login="onLogin"></forget-phone>
      <Spin size="large" fix v-if="spinShow"></Spin>
    </Card>
  </div>
</template>

<script>
import loginFrom from './components/loginFrom';
import forgetPassword from './components/forgetPassword';
import registerFrom from './components/register';
import tableList from './tableList';
import forgetPhone from './components/forgetPhone';
import { isLoginApi, logoutApi, smsNumberApi, serveInfoApi } from '@/api/setting';
export default {
  name: 'smsConfig',
  components: { loginFrom, forgetPassword, registerFrom, tableList, forgetPhone },
  data() {
    return {
      imgUrl: require('@/assets/images/ren.png'),
      spinShow: false,
      isShowLogn: false, // 登录
      isShow: false, // 修改密码
      isShowReg: false, // 注册
      isShowList: false, // 登录之后列表
      smsAccount: '',
      accountInfo: {},
      isForgetPhone: false, // 修改手机号
      isIndex: false, // 判断忘记密码返回的路径
      sms: { open: 0 }, // 短信信息
      query: { open: 0 }, // 物流查询
      dump: { open: 0 }, // 电子面单打印
      copy: { open: 0 }, // 商品采集
    };
  },
  created() {
    this.onIsLogin();
  },
  methods: {
    onChangePhone() {
      this.isForgetPhone = true;
      this.isShowLogn = false;
      this.isShowList = false;
    },
    onOpen(val) {
      this.$refs.tableLists.onOpenIndex(val);
    },
    mealPay(val) {
      this.$router.push({ path: this.$routeProStr + '/setting/sms/sms_pay/index', query: { type: val } });
    },
    // 开通服务
    openService(val) {
      switch (val) {
        case 'sms':
          this.sms.open = 1;
          break;
        case 'copy':
          this.copy.open = 1;
          break;
        case 'query':
          this.query.open = 1;
          break;
        default:
          this.dump.open = 1;
          break;
      }
    },
    // 平台用户信息
    getServeInfo() {
      this.spinShow = true;
      serveInfoApi()
        .then(async (res) => {
          let data = res.data;
          this.sms = {
            num: data.sms.num,
            open: data.sms.open,
            surp: data.sms.open,
          };
          this.query = {
            num: data.query.num,
            open: data.query.open,
            surp: data.query.open,
          };
          this.dump = {
            num: data.dump.num,
            open: data.dump.open,
            surp: data.dump.open,
          };
          this.copy = {
            num: data.copy.num,
            open: data.copy.open,
            surp: data.copy.open,
          };
          this.spinShow = false;
          this.smsAccount = data.account;
          this.accountInfo = data;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
          this.isShowLogn = true;
          this.isShowList = false;
          this.spinShow = false;
        });
    },
    // 查看是否登录
    onIsLogin() {
      this.spinShow = true;
      isLoginApi()
        .then(async (res) => {
          let data = res.data;
          this.isShowLogn = !data.status;
          this.isShowList = data.status;
          this.spinShow = false;
          if (data.status) {
            this.getServeInfo();
          }
        })
        .catch((res) => {
          this.spinShow = false;
          this.$Message.error(res.msg);
        });
    },
    // 退出登录
    signOut() {
      logoutApi()
        .then(async (res) => {
          this.isShowLogn = true;
          this.isShowList = false;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    // 修改密码
    onChangePassswordIndex() {
      this.isIndex = true;
      this.passsword();
    },
    // 忘记密码
    onChangePasssword() {
      this.isIndex = false;
      this.passsword();
      // this.isShowLogn = false;
      // this.isShow = true;
      // this.isShowList = false;
    },
    passsword() {
      this.isShowLogn = false;
      this.isShow = true;
      this.isShowList = false;
    },

    // 立即注册
    onChangeReg() {
      this.isShowLogn = false;
      this.isShow = false;
      this.isShowReg = true;
    },
    // 立即登录
    logoup() {
      this.isShowLogn = true;
      this.isShow = false;
      this.isShowReg = false;
    },
    // 登录跳转
    onLogin() {
      let url = this.$route.query.url;
      if (url) {
        this.$router.replace(url + '?type=' + this.$route.query.type);
      } else {
        this.isShowLogn = false;
        this.isShow = false;
        this.isShowReg = false;
        this.isForgetPhone = false;
        this.isShowList = true;
        this.getServeInfo();
      }
    },
    // 密码返回
    goback() {
      if (this.isIndex) {
        this.isShowList = true;
        this.isShow = false;
      } else {
        this.isShowLogn = true;
        this.isShow = false;
      }
    },
    // 手机号返回
    gobackPhone() {
      this.isShowList = true;
      this.isForgetPhone = false;
    },
  },
};
</script>

<style lang="less" scoped>
.picTxt {
  padding: 8px 0 12px;
}
.dashboard {
  width: auto !important;
  min-width: 300px;
}
.header-extra {
  /*width: 25%;*/
  border-right: 1px solid #e9e9e9;
  text-align: center;
  padding: 0 18px;
}
.page-account-top-tit {
  font-size: 21px;
  color: #1890ff;
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
    }
    &-tip {
      display: inline-block;
      vertical-align: middle;
      &-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 12px;
      }
      &-desc {
        color: #808695;
      }
    }
    &-extra {
      width: 100% !important;
      .ivu-col {
        p {
          text-align: right;
        }
        p:first-child {
          span:first-child {
            margin-right: 4px;
          }
          span:last-child {
            color: #808695;
          }
        }
        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
@aaa: ~'>>>';
.conBox {
  @{aaa} .ivu-page-header-extra {
    width: auto !important;
    min-width: 457px;
  }
  @{aaa} .ivu-page-header {
    padding: 16px 0px 0 32px !important;
  }
}
.samll_font {
  text-align: center;
  padding: 0px 10px;
}
.title-tips {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}
</style>
